<template>
  <div class="relative flex-1 w-full bg-gradient-to-br from-[#ffeef2] via-[#ffe0e6] to-[#ffc5d8] flex flex-col overflow-hidden h-full">
    <!-- Animated background shapes like homepage -->
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
      <div class="absolute -top-10 -left-10 w-72 h-72 bg-pink-300 rounded-full filter blur-xl opacity-70 animate-float will-change-transform"></div>
      <div class="absolute -bottom-10 -right-10 w-72 h-72 bg-purple-300 rounded-full filter blur-xl opacity-70 animate-float will-change-transform [animation-delay:2s]"></div>
      <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-72 h-72 bg-yellow-300 rounded-full filter blur-xl opacity-70 animate-float will-change-transform [animation-delay:4s]"></div>
    </div>

    <!-- Content -->
    <div class="w-full p-8 max-w-[1400px] mx-auto overflow-hidden h-full md:p-8 max-md:p-4">
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
// Tool page wrapper component
</script>

<style scoped>
</style>
